<template>
  <ul class="cascader-panel-list">
    <li
      v-for="option of options"
      :key="option.value"
      :class="['cascader-panel-item', {
        selected: value.includes(option.value),
      }]"
      @click="handleSelectItem(option.value, level, $event)"
    >
      <span>{{ option.label }}</span>
      <div
        v-if="value.includes(option.value) && !!option.children && !!option.children.length"
        class="cascader-panel-children"
      >
        <CascaderPanelList
          :options="option.children"
          :level="level + 1"
          :value="value"
          @select="handleSelectItem"
        />
      </div>
    </li>
  </ul>
</template>

<script setup>
import CascaderPanelList from './CascaderPanelList.vue'

const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  value: {
    type: Array,
    default: () => [],
  },
  level: {
    type: Number,
    default: 1,
  },
})
const emit = defineEmits(['select'])

const handleSelectItem = (value, l, event) => {
  if (event) {
    event.stopPropagation()
  }

  emit('select', value, l)
}
</script>

<style scoped>
.cascader-panel-list {
  width: 180px;
  height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: auto;
  list-style: none;
  margin-right: 10px;
  overflow: visible;
  position: relative;
  color: #000;
}

.cascader-panel-list .cascader-panel-item {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  transition: all 0.3s;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
}

.cascader-panel-list .cascader-panel-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.cascader-panel-list .cascader-panel-item.selected {
  color: #1677ff;
  background-color: #e6f4ff;
}

.cascader-panel-list .cascader-panel-item .cascader-panel-children {
  position: absolute;
  left: calc(100% + 20px);
  top: 0;
}
</style>